﻿let context: CanvasRenderingContext2D;
let doc = new MyCoordinates(200,200);
let data = [10, 50, 10, 50, 10, 50, 10, 50, 10, 50, 10, 50, 10, 50, 10, 50, 10, 50, 10, 50, 10, 50, 10, 50];
let lenth = 50;
let a1: Animation;

var timestamp: number;


window.onload = () => {
    timestamp = new Date().getTime();
    let a = document.getElementById("canvas1") as HTMLCanvasElement;
    context = a.getContext("2d");
    context.fillStyle = "#a10000";
    context.beginPath();
    context.arc(doc.x, doc.y, 1, 0, 2 * Math.PI);
    context.fill();
    a1 = new Animation();
    a1.init();
};

function onButton1(json: string) {
    data = JSON.parse(json);
    init();
    onDow(json);
}

class Animation {
    paricles:Array<ParticleElement> = new Array<ParticleElement>();

    init() {
        for (let i = 0; i < 1000; i++)
            this.paricles.push(new ParticleElement(TriangleLengthXY(doc, 360 / 1000 * i, lenth + Math.round(Math.random() * 200)), Math.round(Math.random() * 359)));
        this.dow();
    }

    dow() {
        let time = new Date().getTime();
        
        document.getElementById("text").innerHTML = "fps:" + 1000 / (time - timestamp);
        timestamp = time;
        context.clearRect(0, 0, 500, 500);

        let dataAngle = 360 / data.length;

        for (let i = 0; i < this.paricles.length; i++) {
            let partic = this.paricles[i];
            let a = parseInt(partic.angle / dataAngle + "") + 1;
            if (a >= data.length) {
                a = 0;
            }
            
            partic.update(TriangleLengthXY(doc, dataAngle * a, data[a] + lenth + Math.round(Math.random() * 30)));
        }

        requestAnimationFrame(() => {
            this.dow();
        });
    }



   
}

class ParticleElement {
    myCoor: MyCoordinates;
    angle: number;
    direction: number;
    speed: number = 5;
    constructor(myCoor: MyCoordinates, direction: number) {
        this.myCoor = myCoor;
        this.angle = TriangleRadii(doc, myCoor);
        this.direction = direction;
    }

    update(target: MyCoordinates) {
        let targtiAngle = TriangleRadii(this.myCoor, target);
        if (this.myCoor.isCoordinates(target) || targtiAngle == this.direction) {
            this.onMobile();
        }

        if (targtiAngle > this.direction) {
            if ((targtiAngle - this.direction) >= 180) {
                this.onAnticlockwise();
            } else {
                
                this.onClockwise();
            }
        } else if (targtiAngle < this.direction) {
            if ((this.direction - targtiAngle) > 180) {
                this.onClockwise();
            } else {
                
                this.onAnticlockwise();
            }
        }

        this.onMobile();
        this.angle = TriangleRadii(doc, this.myCoor);

    }

    onClockwise() {
        this.direction+=15;
        if (this.direction >= 360) {
            this.direction = 0;
        }
    }

    onAnticlockwise() {
        this.direction-=15;
        if (this.direction < 0) {
            this.direction = 359;
        }
    }

    onMobile() {
        this.myCoor = TriangleLengthXY(this.myCoor, this.direction, this.speed);
        this.onDowArc();
    }

    onDowArc() {
        context.fillStyle = "#a10000";
        //context.beginPath();
        //context.arc(this.myCoor.x, this.myCoor.y, 1, 0, 2 * Math.PI);
        //context.fill();
        context.fillRect(this.myCoor.x, this.myCoor.y,1,1);
    }
}